<template>
  <section class="tools-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        Base64加解密[文字]
      </div>
      <div class="text item">
        <p v-for="(item, index) in nameList" :key="index">
          <span>name：{{ item.name }}</span>
          <span>{{ item.mapping }} : mapping</span>
        </p>
        <br>
        <p v-for="(em, id) in cnNameList" :key="id+'name'">
          <span>name: {{ em }}</span>
          <span>{{ em | cnNameFilter }} : cnName</span>
        </p>
        <br>
        <p v-for="(em, id) in phoneList" :key="id+'phone'">
          <span>phone: {{ em }}</span>
          <span>{{ em | phoneFilter }} : phone</span>
        </p>
      </div>
    </el-card>
  </section>
</template>
<script>
import { encode, decode } from 'js-base64'
export default {
  name: 'Base64',
  data () {
    return {
      nameList: [
        {
          name: '赵四芳',
          type: 0
        },
        {
          name: '6LW15Zub6Iqz',
          type: 1
        },
        {
          name: '6ZmI5bCP6aOe',
          type: 1
        },
        {
          name: '5YiG5pyf5LmQwrfkuZDkuqvkuoznuqc=',
          type: 1
        },
        {
          name: '陈小飞',
          type: 0
        },
        {
          name: '陈独秀',
          type: 0
        },
        {
          name: '库昊',
          type: 0
        }
      ],
      cnNameList: ['赵四芳', '库昊', '分期乐·乐享二', '想不到吧', '陈小飞', '陈思燕', '一'],
      phoneList: ['19901704827', '18757013349', '23245896544']
    }
  },
  filters: {
    cnNameFilter: function (v) {
      if (!v) return ''
      const nameReg = /(.{1})(.*)(.{1})/g
      return v.replace(nameReg, '$1***$3')
    },
    phoneFilter: function (v) {
      if (!v) return ''
      const phoneReg = /(\d{3})(\d{4})(\d{4})/
      return v.replace(phoneReg, '$1****$3')
    }
  },
  created () {
    this.convertCoding()
  },
  methods: {
    convertCoding () {
      this.nameList.map((v, i) => {
        if (v.type) {
          this.$set(this.nameList, i, { ...v, mapping: decode(v.name) })
        } else {
          this.$set(this.nameList, i, { ...v, mapping: encode(v.name) })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
p {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
}
</style>
